/*
 * @Description: 权限规则 - 权限列表 - 列表组件
 * @Author: Rfan
 * @Date: 2022-04-06 14:07:46
 * @LastEditTime: 2022-05-25 08:58:09
 */

import { useEffect, useState } from 'react';
import { Table } from 'antd';
import classNames from 'classnames/bind';
import type { FC } from 'react';
import { useManageRuleContext } from '../../contexts/ManageRuleContext';
import type { IPageQuery } from '@/interfaces/global';

import styles from '../../styles/list.module.scss';

const cx = classNames.bind(styles);

const { Column } = Table;

export type RuleTableProps = {
  title?: string;
  data?: any;
};

const RuleTable: FC<RuleTableProps> = ({ data }) => {
  const {
    selectFond,
    selectAT,
    selectLevel,
    ruleList,
    ruleSelectItems,
    setRuleSelectItems,
    getRightSpecList
  } = useManageRuleContext();
  console.log('rule pane:', data, ruleSelectItems);
  const [loading, setLoading] = useState(false);
  const [total, setTotal] = useState(0);
  const [listQuery, setListQuery] = useState<IPageQuery>({
    pageNo: 1,
    pageSize: 10,
    param: {}
  });

  useEffect(() => {
    if (selectAT.id || selectLevel.level) {
      setListQuery((state: IPageQuery) => {
        return {
          ...state,
          param: {
            fondId: selectFond.id,
            archiveTypeId: selectAT.id,
            atCode: selectAT.atCode,
            atType: selectAT.atType,
            level: selectLevel.level
          }
        };
      });
    }
  }, [selectAT.id, selectLevel.level]);

  useEffect(() => {
    if (listQuery?.param?.level >= 0) {
      setLoading(true);
      getRightSpecList(listQuery)
        .then((res: any) => {
          console.log('back', res);
          setTotal(res?.totalCount);
        })
        .finally(() => {
          setLoading(false);
        });
    }
  }, [listQuery]);
  /**
   * @description: 表格选中相关
   * @param {number} ruleSelectItems
   * @return {*}
   */
  const onSelectChange = (selectedKeys: number[]): void => {
    console.log('onSelectChange', selectedKeys);

    const _ruleSelectItems = [...ruleSelectItems];
    if (_ruleSelectItems.indexOf(selectedKeys[0]) < 0) {
      setRuleSelectItems(selectedKeys);
    }
  };

  /**
   * @description: 表格增加复选框相关参数
   */
  const rowSelection: any = {
    type: 'radio',
    selectedRowKeys: ruleSelectItems,
    onChange: onSelectChange
  };

  /**
   * @description: 表格选中条目方法
   * @param {any} record 选中的条目
   */
  const selectRow = (record: any) => {
    console.log('selectRow', record);

    const _ruleSelectItems = [...ruleSelectItems];
    if (_ruleSelectItems.indexOf(record.id) < 0) {
      setRuleSelectItems([record.id]);
    }
  };

  /**
   * @description: 切换页码触发
   * @param {number} page 页码
   * @param {number} pageSize 每页请求条目数
   */
  const pageChange = (page: number, pageSize: number) => {
    setListQuery((state: any) => {
      return {
        ...state,
        pageNo: page,
        pageSize
      };
    });
  };

  return (
    <div className={cx('approve-list')}>
      <Table
        dataSource={ruleList}
        loading={loading}
        rowKey="id"
        size="small"
        bordered
        rowSelection={rowSelection}
        pagination={{
          current: listQuery.pageNo,
          pageSize: listQuery.pageSize,
          total,
          onChange: pageChange
        }}
        onRow={(record) => ({
          onClick: () => {
            selectRow(record);
          }
        })}
      >
        <Column title="序号" dataIndex="id" key="id" align="center" />
        <Column title="规则描述" dataIndex="ruleDescription" key="ruleDescription" align="center" />
        <Column title="规则表达式" dataIndex="ruleExpression" key="ruleExpression" align="center" />
      </Table>
    </div>
  );
};

export default RuleTable;
